<template>
	<div class="alarmConfiguration zy-content pd50">
		<back-level @click="close" />
		<!-- <search :columns="searchData" @getSearch="getSearch(arguments)"></search> -->
		<div class="alarmConfiguration">
			<div class="list-layout mt16">
				<div class="btns clear">
					<span class="title">{{ $t('common.listInformation') }}</span>
					<!-- <Button @click="createfaultCodeShowH">{{ $t('common.New') }}</Button>
					<Button @click="delFaultCodeShowClick">{{ $t('common.batchDelete') }}</Button> -->
				</div>
				<!-- 表格 -->
				<div class="tableContent">
					<Table
						class="resizable-table"
						border
						@on-column-width-resize="onColumnWidthResize"
						:columns="columns"
						ellipsis
						ref="selection"
						stripe
						:data="dataArr"
						@on-selection-change="onSelectChange"
					>
						<template slot-scope="{ row }" slot="action">
							<span class="operationBtn" @click="delRow(row)"><i class="iconfont zy-common-shanchu"></i>{{ $t('common.Delete') }}</span>
						</template>
					</Table>
				</div>
				<!-- 分页 -->
				<div class="pageWrap mt16">
					<pageLeftTitle :total="total" :selected="delIds.length" />
					<Page
						:total="total"
						:page-size="pageSize"
						:page-size-opts="pageSizeOption"
						:current="pageNum"
						@on-change="changePageNum"
						@on-page-size-change="changePageSize"
						show-sizer
						show-total
					/>
				</div>
			</div>
		</div>
		<!-- <Modal :mask-closable="false" v-model="delFaultCodeShowF" :title="$t('common.Delete')" class="modal-title-layout">
			<div class="icon red">
				<i class="iconfont zy-common-shanchu"></i>
			</div>
			<p class="title">
				<span>{{ $t('common.confirmDelete') }}</span>
			</p>
			<div slot="footer">
				<Button type="default" @click="delFaultCodeShowF = false">{{ $t('common.Cancle') }}</Button>
				<Button type="primary" :loading="loading" @click="deleteOk">{{ $t('maintenance.Confirmed') }}</Button>
			</div>
		</Modal>
		<Modal :mask-closable="false" v-model="create" title="关联用户新增" :loading="loading" width="1200">
			<Row style="padding-bottom: 16px">
				<Col span="4" align="center" style="line-height: 32px"> 姓名： </Col>
				<Col span="6" align="left">
					<Input v-model="userKey" :placeholder="`${$t('common.inputInfo')}`" clearable @on-change="getUserList(userKey)" />
				</Col>
				<Col span="2" align="center"> </Col>
				<Col span="12" align="center" style="line-height: 32px"> 已选用户列表 </Col>
			</Row>
			<Row>
				<Col span="12" align="center">
					<Table ellipsis ref="selection" :columns="userColumns" :data="userList" height="520" width="580">
						<template slot-scope="{ row }" slot="action">
							<span style="color: #3271f0; cursor: pointer" @click="selectClick(row)">选择</span>
						</template>
					</Table>
				</Col>
				<Col span="12" align="center">
					<Table ellipsis ref="selection" :columns="userColumns" :data="selectList" height="520" width="580">
						<template slot-scope="{ row }" slot="action">
							<span style="color: #3271f0; cursor: pointer" class="operationBtn" @click="delClick(row)">
								{{ $t('common.Delete') }}
							</span>
						</template>
					</Table>
				</Col>
			</Row>
			<div slot="footer">
				<Button type="default" @click="create = false">{{ $t('common.Cancle') }}</Button>
				<Button type="primary" :loading="loading" @click="addOk">{{ $t('maintenance.Confirmed') }}</Button>
			</div>
		</Modal> -->
	</div>
</template>
<!--0 weiguanl  -->
<script>
import search from '@/components/curd/searchList.vue';
import toggleTableOperation from '@/mixins/toggleTableOperation';
export default {
	name: 'reportingDetail',
	// components: { search },
	mixins: [toggleTableOperation],
	data() {
		return {
			test: [],
			//一级搜索
			userColumns: [
				{
					title: '工号',
					key: 'empno',
					align: 'center',
				},
				{
					title: '名称',
					key: 'realname',
					align: 'center',
				},
				{
					title: '手机号',
					key: 'phone',
					align: 'center',
				},
				{
					title: '用户名称',
					key: 'username',
					align: 'center',
				},
				{
					title: `${this.$t('common.operation')}`,
					slot: 'action',
					align: 'center',
				},
			],
			searchData: [
				{
					title: '姓名',
					key: 'realname',
				},
				{
					title: '用户名',
					key: 'username',
				},
				{
					title: '手机号',
					key: 'phone',
				},
			],
			//一级table配置
			columns: [
				// {
				// 	key: 'selection',
				// 	type: 'selection',
				// 	width: 60,
				// 	align: 'center',
				// },
				{
					title: '标签流水号',
					key: 'tagSerialNumber',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '类型',
					key: 'status',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '数量',
					key: 'packingQuantity',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '标签余量',
					key: 'residueNumber',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '操作人',
					key: 'operator',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '操作时间',
					key: 'operatorTime',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				// {
				// 	title: '操作',
				// 	slot: 'action',
				// 	fixed: 'right',
				// 	minWidth: 180,
				// 	align: 'center',
				// },
			],
			loading: false,
			//三级搜索参数
			searchParams: {},

			//一级页面分页参数
			pageNum: 1,
			pageSize: 10,
			total: 0,

			dataArr: [],
			userList: [],
			allCheck: false,
			create: false,
			delFaultCodeShowF: false, //是否显示删除弹窗
			pageSizeOption: [10, 20, 30, 40],
			delIds: [],
			selection: [],
			selectList: [],
			targetRow: {},
		};
	},
	mounted() {
		this.getTableColumnsWidth(this.columns);
		this.searchList();
	},
	methods: {
		delFaultCodeShowClick() {
			//点击批量删除
			if (!this.delIds || this.delIds.length < 1) {
				this.$Message.warning(this.$t('common.selectInfo') + '一条数据');
				return;
			}
			this.delFaultCodeShowF = true;
		},
		getSearch(params) {
			this.searchParams = JSON.parse(JSON.stringify(params[0]));
			this.pageNum = 1;
			this.searchList();
		},
		selectClick(row) {
			let status = false;
			this.selectList.some((item, i) => {
				if (item.userId === row.userId) {
					this.$Message.warning({ content: '该用户已被选择', duration: 6, closable: true });
					status = true;
				}
			});
			if (status === false) {
				this.selectList.unshift(row);
			}
		},
		delClick(row) {
			this.selectList.some((item, i) => {
				if (item.userId === row.userId) {
					this.selectList.splice(i, 1);
					return true;
				}
			});
		},
		addOk() {
			let params = [];
			const that = this;
			if (this.selectList.length < 1) {
				this.$Message.warning({ content: '请选择用户后提交', duration: 6, closable: true });
				return false;
			}
			params = this.selectList.map((item, index) => {
				return { ...item, deviceCode: that.$route.query.deviceCode };
			});
			this.loading = true;
			this.axios({
				method: 'post',
				url: '/dms/deviceUser/deviceAssociationUser',
				data: params,
			}).then((res) => {
				this.loading = false;
				if (res.code === 200) {
					this.create = false;
					this.changeNum();
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		reset() {
			this.searchParams = {};
			this.changeNum();
		},
		//分页
		changeNum() {
			this.pageNum = 1;
			this.searchList();
		},
		changePageSize(pageSize) {
			this.pageSize = pageSize;
			this.searchList();
		},
		changePageNum(val) {
			this.pageNum = val;
			this.searchList();
		},
		createfaultCodeShowH(row) {
			//点击增加或编辑
			this.getUserList();
			// this.userKey = ''
			this.selectList = [];
			this.create = true;
		},
		onSelectChange(selection) {
			let myArray = [];
			selection.map((item, index) => {
				myArray.push(item.id);
			});
			if (myArray.length > 0) {
				this.allCheck = true;
			} else {
				this.allCheck = false;
			}
			this.delIds = myArray;
		},
		//查询列表
		searchList() {
			let params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				reportingId: this.$route.query.id,
			};
			for (let key in this.searchParams) {
				if (this.searchParams[key]) {
					this.$set(params, key, this.searchParams[key]);
				}
			}
			// /dms/deviceUser/selectNotAssUserPage
			this.axios({
				url: '/dms/pRoductionReporting/queryReportingLabelPrinting',
				method: 'get',
				params,
			}).then((res) => {
				if (res.code === 200) {
					this.dataArr = res.data.records;
					this.total = res.data.total;
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		getUserList(query) {
			this.axios({
				method: 'POST',
				url: '/dms/deviceUser/selectNotAssUserPage',
				data: {
					pageNum: 1,
					pageSize: 9999,
					deviceCode: this.$route.query.deviceCode,
					realname: query,
				},
			}).then((res) => {
				if (res.code === 200) {
					this.userList = res.data.records;
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		delRow(row) {
			this.delFaultCodeShowF = true;
			this.delIds = [row.id];
			// this.targetRow = row;
		},
		deleteOk(ids) {
			this.loading = true;
			this.axios({
				method: 'DELETE',
				url: '/dms/deviceUser/deleteDeviceUser',
				data: this.delIds,
			}).then((res) => {
				this.loading = false;
				if (res.code === 200) {
					this.delIds = [];
					this.changeNum();
					this.$Message.success('删除成功');
					this.delFaultCodeShowF = false;
					this.allCheck = false;
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
	},
};
</script>

<style scoped lang="scss">
.ivu-input-number {
	width: -webkit-fill-available;
}

.btn-box {
	padding: 8px 5px !important;
}
</style>
